<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand" @click="tableshow" :class="{'textactive' : !secondshow}">外包人员增减表</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div style="float: left;width: 55%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 : </h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                <el-select v-model="customername" placeholder="请选择客户名称" @change="selectname"
                           style="margin-right: 10px;">
                  <el-option v-for="item in customerNames" :key="item.name" :label="item.name"
                             :value="item.name"></el-option>
                </el-select>
                <el-select @change="selectstate" v-model="state" placeholder="请选择员工状态">
                  <el-option v-for="item in statelist" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-row>
          
          
          </div>
          <div class="interviewtrack1 right1" style="float: right;">
            <el-input
              style="margin-right: 30px;"
              v-model.trim="searchword"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="search"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="search"></i>
            </el-input>
            <el-button
              class="add"
              size="small"
              @click="add"
              round>新增
            </el-button>
            <el-button
              class="edit"
              size="small"
              @click="edit"
              round>修改
            </el-button>
            <el-button
              class="download"
              size="small"
              @click="download"
              round>下载
            </el-button>
            <el-button
              v-if="!stateshow"
              class="trans"
              @click="trans"
              size="small"
              round>转离职
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23" class="posttable2" v-show="!stateshow">
          <el-table
            class="resumetable"
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column
              width="100"
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              width="100"
              prop="sex"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式">
            </el-table-column>
            <el-table-column
              width="100"
              prop="position"
              label="职位">
            </el-table-column>
            <el-table-column
              width="100"
              prop="level"
              label="级别">
            </el-table-column>
            <el-table-column
              width="100"
              prop="graduationTime"
              label="毕业时间"
            >
            </el-table-column>
            <el-table-column
              width="182"
              prop="area"
              label="地区"
            >
            </el-table-column>
            <el-table-column
              prop="workLength"
              label="工作年限"
            >
            </el-table-column>
            <el-table-column
              label="薪资"
            >
              <template slot-scope="scope">
                {{scope.row.salary}}k*{{scope.row.salaryNum}}
              </template>
            </el-table-column>
            <el-table-column
              prop="project"
              label="项目"
            >
            </el-table-column>
            <el-table-column
              prop="projectCharger"
              label="项目负责人"
            >
            </el-table-column>
            <el-table-column
              prop="saleCharger"
              label="销售负责人"
            >
            </el-table-column>
            <el-table-column
              prop="entryTime"
              label="入职时间"
            >
            </el-table-column>
            <el-table-column
              prop="admissionTime"
              label="进场时间"
            >
            </el-table-column>
            <el-table-column
              prop="recommender"
              label="推荐人"
            >
            </el-table-column>
          </el-table>
          
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="23" class="posttable2" v-show="stateshow">
          <el-table
            class="resumetable"
            ref="singleTable1"
            :data="tableData1"
            highlight-current-row
            @current-change="handleCurrentChange1"
          >
            <el-table-column
              width="100"
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              width="100"
              prop="sex"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式">
            </el-table-column>
            <el-table-column
              width="100"
              prop="position"
              label="职位">
            </el-table-column>
            <el-table-column
              width="100"
              prop="level"
              label="级别">
            </el-table-column>
            <el-table-column
              prop="entryTime"
              label="入职时间"
            >
            </el-table-column>
            <el-table-column
              prop="admissionTime"
              label="进场时间"
            >
            </el-table-column>
            <el-table-column
              prop="depatureTime"
              label="退场时间"
            >
            </el-table-column>
            <el-table-column
              prop="isOwnComputer"
              label="自带电脑"
            >
            </el-table-column>
            <el-table-column
              prop="secondDep"
              label="二级部门"
            >
            </el-table-column>
            <el-table-column
              prop="project"
              label="项目"
            >
            </el-table-column>
            <el-table-column
              prop="projectCharger"
              label="项目负责人"
            >
            </el-table-column>
            <el-table-column
              prop="saleCharger"
              label="销售负责人"
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
            >
            </el-table-column>
          </el-table>
          
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="pagehandleCurrentChange1"
              :current-page="currentPage1"
              :page-sizes="[5,10,15]"
              :page-size="pagesize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount1"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    新增在职人员数据-->
    <div v-if="type == 1">
      <new-incumbency ref="NewIncumbency" v-show="addShow" @getlist="getList1"></new-incumbency>
    </div>
    <!--    修改在职人员数据-->
    <div v-if="type == 2">
      <edit-incumbency ref="EditIncumbency" v-show="addShow" @getlist="getList1"
                       :current-data="currentRow"></edit-incumbency>
    </div>
    <!--    新增离职人员，不需要传参-->
    <div v-if="type == 3">
      <new-departures ref="NewDepartures" v-show="addShow" @getlist="getList1"></new-departures>
    </div>
    <!--    修改离职人员-->
    <div v-if="type == 4">
      <edit-departures ref="EditDepartures" v-show="addShow" @getlist="getList1"
                       :current-data="currentRow1"></edit-departures>
    </div>
    <!--    新增离职人员，需要传参-->
    <div v-if="type == 5">
      <new-departures1 ref="NewDepartures1" v-show="addShow" @getlist="getList1"
                       :current-data="currentRow"></new-departures1>
    </div>
    
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何员工!</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  
  </div>
</template>

<script>
  import NewIncumbency from './newincumbency'
  import EditIncumbency from './editincumbency'
  import NewDepartures from './newdepartures'
  import NewDepartures1 from './newdepartures1'
  import EditDepartures from './editdepartures'
  import axios from 'axios'
  
  export default {
    name: "outsourcedsheet",
    data() {
      return {
        customername: '',
        customerNames: [],
        state: '在职',
        statelist: ["在职", "离职"],
        searchword: '',
        stateshow: false,
        tableData: [],
        currentPage: 1,
        currentRow: null,
        pagesize: 15,
        totalcount: null,
        tableData1: [],
        currentPage1: 1,
        currentRow1: null,
        pagesize1: 15,
        totalcount1: null,
        secondshow: false,
        secondtitle: '',
        addShow: false,
        type: null,
        errordialogVisible: false
      }
    },
    created() {
      axios.post(this.url + '/resumeUpload/getCustomerNames').then(res => {
        this.unlogin(res.data.code)
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
          this.customername = this.customerNames[0].name;
          this.getList();
        }
      });
    },
    methods: {
      getList() {
        axios.post(this.url + '/statistics/entry/getList', {
          customer: this.customername,
          state: this.state,
          condition: this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (!this.stateshow) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            } else {
              this.tableData1 = res.data.data.list;
              this.totalcount1 = res.data.data.total;
            }
            this.addShow = false;
            this.secondshow = false;
          }
        })
      },
      getList1() {
        this.currentPage = 1;
        axios.post(this.url + '/statistics/entry/getList', {
          customer: this.customername,
          state: this.state,
          condition: this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (!this.stateshow) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            } else {
              this.tableData1 = res.data.data.list;
              this.totalcount1 = res.data.data.total;
            }
            this.addShow = false;
            this.secondshow = false;
          }
        })
      },
      selectname() {
        this.currentPage = 1;
        this.getList();
      },
      selectstate() {
        this.currentPage = 1;
        if (this.state == "在职") {
          this.stateshow = false;
          this.getList();
        } else if (this.state == '离职') {
          this.stateshow = true;
          this.getList();
        }
      },
      search() {
        this.currentPage = 1;
        this.getList();
      },
      //elementUI的表格事件,获取当前表格行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //修改表格分页的展示条数
      handleSizeChange(val) {
        this.pagesize = val;
        this.getList();
      },
      //修改表格分页的当前页
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      handleCurrentChange1(val) {
        this.currentRow1 = val;
      },
      //修改表格分页的展示条数
      handleSizeChange1(val) {
        this.pagesize1 = val;
        this.getList();
      },
      //修改表格分页的当前页
      pagehandleCurrentChange1(val) {
        this.currentPage1 = val;
        this.getList();
      },
      tableshow(row) {
        this.type = null;
        this.addShow = false;
        this.secondtitle = '';
        this.secondshow = false;
        if (!this.stateshow) {
          this.$refs.singleTable.setCurrentRow(row);
          this.currentRow = null;
        } else {
          this.$refs.singleTable1.setCurrentRow(row);
          this.currentRow1 = null;
        }
      },
      add() {
        if (this.state == '在职') {
          this.type = 1;
          this.addShow = !this.addShow;
          this.secondtitle = '新增人员';
          this.secondshow = true;
          if (this.$refs.NewIncumbency) {
            this.$refs.NewIncumbency.initdata();
            this.$refs.NewIncumbency.resetFields('form');
          }
        } else if (this.state == '离职') {
          this.type = 3;
          this.addShow = !this.addShow;
          this.secondtitle = '新增离职人员';
          this.secondshow = true;
          if (this.$refs.NewDepartures) {
            this.$refs.NewDepartures.initdata();
            this.$refs.NewDepartures.resetFields('form');
          }
        }
      },
      trans() {
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          this.errordialogVisible = !this.errordialogVisible
        } else {
          this.type = 5;
          this.addShow = !this.addShow;
          this.secondtitle = '新增离职人员';
          this.secondshow = true;
          if (this.$refs.NewDepartures1) {
            this.$refs.NewDepartures1.initdata();
            this.$refs.NewDepartures1.resetFields('form');
          }
        }
      },
      edit() {
        if (!this.stateshow) {
          if (this.currentRow == null) {
            document.documentElement.style.overflow = 'hidden';
            this.errordialogVisible = !this.errordialogVisible
          } else {
            if (this.state == '在职') {
              this.type = 2;
              this.addShow = !this.addShow;
              this.secondtitle = '修改人员';
              this.secondshow = true;
              if (this.$refs.EditIncumbency) {
                this.$refs.EditIncumbency.resetFields('form');
                this.$refs.EditIncumbency.initdata();
              }
            }
          }
        } else {
          if (this.currentRow1 == null) {
            document.documentElement.style.overflow = 'hidden';
            this.errordialogVisible = !this.errordialogVisible
          } else {
            if (this.state == '离职') {
              this.type = 4;
              this.addShow = !this.addShow;
              this.secondtitle = '修改离职人员';
              this.secondshow = true;
              if (this.$refs.EditDepartures) {
                this.$refs.EditDepartures.resetFields('form');
                this.$refs.EditDepartures.initdata();
              }
            }
          }
        }
      },
      download() {
        axios.post(this.url + "/statistics/entry/downloadExcel", {
          customer: this.customername
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code !== -1) {
            window.location.href = this.url + "/statistics/entry/downloadExcel?customer=" + this.customername
          }
        })
      },
      handleClose(done) {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    components: {
      NewIncumbency,
      EditIncumbency,
      NewDepartures,
      EditDepartures,
      NewDepartures1
    },
    watch: {
      'searchword': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.getList()
        }
      }
    }
  }
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .add {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .add:focus {
    color: #fff !important;
  }
  
  .edit {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .edit:focus {
    color: #fff !important;
  }
  
  .download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
  
  .download:hover {
    color: #fff !important;
  }
  
  .download:focus {
    color: #fff !important;
  }
  
  .trans {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #ee3f57 0%, #e53c52 100%);
  }
  
  .trans:hover {
    color: #fff !important;
  }
  
  .trans:focus {
    color: #fff !important;
  }
  
  .hand {
    cursor: pointer;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .textactive {
    color: #1099ff;
  }
</style>
